<script setup>
import { ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router';
import { Document } from '@element-plus/icons-vue'
import {getDetailService,getDownLoadService} from '@/api/AnnouncementAll.js';
import {changeMemberService} from '@/api/Item.js'
const route = useRoute();
// 获取路径参数 'id'
const id = ref(route.query.id);
console.log(id.value)
import {Check,Delete,Edit,Message,Search,Star} from '@element-plus/icons-vue'



// do not use same name with ref
const form = ref({
    id:id.value,
    name: '',
    category:'',
    brieflno:'',

})

//负责人和成员
  const members=ref([])
//老师
const teacher=ref(
    {   name:'',
        department: "",
        major: "",
        phone: "",
        userId: "",
        position:''
        
    }

)

//企业老师
const proEteacher=ref({
        name:'',
        department: "",
        major: "",
        phone: "",
        position: ""
})
const textCategory=(category)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[category]
}

//文件
const fileList = ref([])
import {getDetailData} from '@/api/Item.js'
//取消事件
const cancel=()=>{
  router.push('/project/establishment')
  ElMessage.warning("返回列表")
  
}
//获取数据
//获取路径id
const getData=async()=>{
      let result =await getDetailData(id.value)
      form.value.name=result.data.name
      form.value.category=result.data.category
      form.value.brieflno=result.data.brieflno
      teacher.value=result.data.teacherPlus
      result.data.memberWorks.forEach(member => {
          members.value.push(member);
      });
      console.log(members.value)
      //proEteacher.value=result.data.proEteacherPlus
      fileList.value=result.data.annexPlus


}
getData();
//向成员数组中加新成员
const addMember=()=>{
    if(members.value.length<5){
    members.value.push({   name:'',
        department: "",
        major: "",
        phone: "",
        userId: ""
        
    })
 }
}
//删除成员
const removeMember=()=>{
    if(members.value.length>2){
        members.value.pop();
    }
   
}
//获取单个成员
const indexStudent=ref(members.value.length)
import {getStudentService,getTeacherService,uploadService,applicationService} from '@/api/Item.js'
import { useRouter } from 'vue-router'
const router = useRouter();
const getStudent=async(userId,index)=>{
    let result=await getStudentService(userId)
    members.value[index]=result.data
    console.log(members.value[0])
}

//返回事件
const cancelSubmit=()=>{
        router.push({ path: '/project/mid_term' })
}
//确认修改成员事件

const confirm=async()=>{
    console.log(id.value)
    const userIds=ref([])
    userIds.value = members.value.slice(1).map(member =>  member.userId );
    const works=ref()
      works.value = members.value.slice(1).map(member => member.work);
      console.log(userIds.value)
      console.log(works.value)
      let params={
        projectId:id.value,
        userIds:userIds.value,
        works:works.value
      }
     let result=await changeMemberService(params)
      if(result.code===200){
        ElMessage.success("修改成员成功")
        router.push({ path: '/project/mid_term' })
      }else{
        ElMessage.error("修改成员失败")
      }
}
</script>
<template>
    <el-text class="mx-1 title-text">
        华北电力大学大学生创新创业计划申请表
      </el-text>
      <el-form :model="form" label-width="120px"  label-position="left"  style="background-color: white;">
        <el-row>
                                <el-col :span="24">
                                  <h3>项目信息</h3>
                                </el-col>
                              </el-row>
                            <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="项目名称" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ form.name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="项目编号" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ form.id }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="项目类型" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ textCategory(form.category) }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                                    <!-- 第二行 -->
                                    <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="负责人" label-width="80px" v-if="members.length > 0" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ members[0].name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="学号" label-width="80px" v-if="members.length > 0" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ members[0].userId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="老师" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ teacher.name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                    <el-form-item label="负责人及成员">
                    <el-button type="primary" round @click="addMember()">添加成员</el-button>
                </el-form-item>
                <el-form-item v-for="(member, index) in members.slice(1)" :key="member.id" label="成员" class="indented-form-item">
                    <div class="input-row">
                    <el-input v-model="member.userId" placeholder="成员学号"  @blur="getStudent(member.userId,index+1)" clearable />
                    <el-input v-model="member.name" placeholder="姓名"  disabled />
                    </div>
                    <div class="input-row">
                    <el-input v-model="member.department" placeholder="院系"  disabled />
                    <el-input v-model="member.major" placeholder="专业"  disabled />
                    </div>
                    <div class="input-row">
                    <el-input v-model="member.phone" placeholder="电话"  disabled />
                    <el-input v-model="member.work" placeholder="分工"  clearable/>
                    <el-button class="input-row" v-if="members.length > 2" type="danger" @click="removeMember(index+1)">删除</el-button>
                    </div>
                   
                  </el-form-item>
                  
          
         
         
          
          <el-form-item>
              <el-button @click="cancelSubmit">返回</el-button>
              <el-button type="primary" @click="confirm">确定</el-button>
          </el-form-item>
      </el-form>
  </template>
    
 
  
  <style scoped>
  /* 缩进样式表中 */
  .indented-form-item {
      padding-left: 40px; /* 例如，增加左内边距 */
      /* 或者 */
      margin-left: 20px; /* 或者增加左外边距 */
  }
  /* 输入框 */
  .input-row {
    display: flex;
    grid-template-columns: repeat(2, 1fr); /* 创建两列 */
    margin-bottom: 10px; /* 调整这个值来改变上下间距 */
    
  }
  
  .input-row .el-input {
    flex: 1;
    margin: 0 5px;
  }

  

  /* 标题样式 */
  .title-text {
    display: block;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  /* 文件图标样式 */
.file-item el-icon {
  margin-right: 10px; /* 图标与文件名之间留出一定间距 */
}
.highlighted-text {
    color: #007bff; /* 蓝色 */
  text-decoration: underline; /* 下划线效果 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 18px; /* 字体大小设置为 18px */
  
}

.highlighted-text:hover {
    
  color: #7300e6; /* 鼠标悬停时的颜色（紫色） */
}
  
  </style>
    
